import './Voice.scss'
import Draggable from 'react-draggable'
import { Badge, Button, notification } from 'antd'
import * as signalr from '@microsoft/signalr'
import { useEffect, useState, useCallback } from 'react'
import { useNavigate } from 'react-router-dom'
import { useKeyPress, useMount, useRequest } from 'ahooks'
import { FrontModalBox } from '../../Pages/Front/Assets/Modal'
import { Http } from '../Api'

export const ModalMapping = {
    A01: { type: 'CameraModal', data: { title: '正在监控的项目详情' } },
    A02: {
        type: 'APIAnnexModal',
        data: { title: '工建简介', type: 'JTGJHomeLeft', uuid: '40491731-928e-4b02-aa30-f45f4a3a563e' },
    },
    A03: { type: 'TableList', data: { title: '权属企业详情', type: 'JTGJHomeTopOne' } },
    A04: { type: 'TableList', data: { title: '项目详情', type: 'JTGJHomeTopTwo' } },
    A05: { type: 'TableList', data: { title: '在册人员详情', type: 'JTGJHomeLeft' } },
}

export const Voice = () => {
    const [api, contextHolder] = notification.useNotification()
    const Navigate = useNavigate()
    const [init, setInti] = useState(false)
    const [Connection, setConnection] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const [Mapping, setMapping] = useState([])
    const { runAsync } = useRequest(Http, { manual: true, onSuccess: res => setMapping(res) })
    useMount(() => {
        runAsync({ url: 'getJsonInfoByUuid', data: { uuid: 'VoiceJson' } })
    })
    const [keyStatus, setKeyStatus] = useState(false)

    useKeyPress(({ key }) => {
        if (keyStatus) {
            const fun = Mapping.find(v => v.keys === key)
            if (fun) Connection.invoke('SendMessage', '打开|' + fun.voice)
        }
    })

    useEffect(() => {
        const myConnection = new signalr.HubConnectionBuilder()
            .withUrl('https://jtgj-rest.ljkjkf.com/wss/aiHub', {
                skipNegotiation: true,
                transport: signalr.HttpTransportType.WebSockets,
                accessTokenFactory: () => sessionStorage.getItem('TOKEN').split(' ')[1],
            })
            .build()
        setConnection(myConnection)
        return () => {
            myConnection.stop()
        }
    }, [])

    const Implement = type => {
        const data = Mapping.find(v => '打开|' + v.voice === type)

        if (data) {
            const { mapping } = data
            if (mapping.length === 3) setOptionsCall(ModalMapping[mapping])
            else Navigate(mapping)
        } else {
            api.info({ message: `指令不存在`, description: type })
        }
    }

    const { runAsync: ImplementFunc } = useRequest(Implement, { debounceWait: 100, manual: true })

    useEffect(() => {
        if (Connection) {
            Connection.on('ReceiveMessage', message => ImplementFunc(message))
            !init && Connection.start().then(() => setInti(true))
        }
    }, [Connection, init])

    return (
        <>
            {contextHolder}
            <Draggable>
                <div className="Voice">
                    <div className="status">
                        <Badge status={init ? 'success' : 'processing'} />
                        语音助手 {init ? '链接成功' : '链接中...'}
                    </div>
                    <Button block onClick={() => setKeyStatus(e => !e)}>
                        快捷键 ( {keyStatus ? '已启动' : '已关闭'} )
                    </Button>
                </div>
            </Draggable>
            <FrontModalBox OptionsCall={OptionsCall} />
        </>
    )
}
